import React from 'react'
import { NavLink } from 'react-router-dom';
import './index.less';
import { Card, Col, Row, Spin, Icon, Badge } from 'antd';
import ReactEcharts from 'echarts-for-react';
import echartTheme from './echartTheme'
// import echarts from 'echarts'
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts'
// 引入饼图和折线图
import 'echarts/lib/chart/bar'
import 'echarts/lib/chart/line'
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';
import 'echarts/lib/component/markPoint';



export default class Home extends React.Component {

    componentWillMount(){
        echarts.registerTheme('theme',echartTheme);
    }
    getOptionbar(){
        let option = {
            title: {
                text: '今日数据',
                textStyle:{
                    fontWeight:"normal",
                    fontSize:16,
                    color:"#333"
                },
            },
            tooltip : {
                trigger: 'axis'
            },
            xAxis: {
                data: [
                    '消息数量',
                    '任务数量',
                    '指派任务数量',
                    '审批数量',
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '订单量',
                    type: 'bar',
                    data: [
                        10,
                        5,
                        3,
                        15,
                    ]
                }
            ]
        }
        return option;
    }
    getOptionline() {
        let option = {
            title: {
                text: '本周数据',
                textStyle:{
                    fontWeight:"normal",
                    fontSize:16,
                    color:"#333"
                },
            },
            tooltip: {
                trigger: 'axis'
            },
            legend:{
                data:['消息数量','任务数量','指派任务数量','审批数量']
            },
            xAxis: {
                data: [
                    '周一',
                    '周二',
                    '周三',
                    '周四',
                    '周五',
                    '周六',
                    '周日'
                ]
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '消息数量',
                    type: 'line',
                    stack: '总量',
                    data: [
                        5,
                        12,
                        7,
                        20,
                        22,
                        15,
                        10
                    ]
                },
                {
                    name: '任务数量',
                    type: 'line',
                    stack: '总量',
                    data: [
                        5,
                        7,
                        9,
                        1,
                        5,
                        6,
                        10
                    ]
                },
                {
                    name: '指派任务数量',
                    type: 'line',
                    stack: '总量',
                    data: [
                        1,
                        2,
                        0,
                        1,
                        3,
                        2,
                        3
                    ]
                },
                {
                    name: '审批数量',
                    type: 'line',
                    stack: '总量',
                    data: [
                        5,
                        15,
                        7,
                        8,
                        10,
                        15,
                        8
                    ]
                },
            ]
        }
        return option;
    }
    render() {
        return (
            <div className="home">
                <Row className="tast-stat">
                    <Col md={12}>
                        <Card bordered={false}>
                            <ReactEcharts
                                option={this.getOptionbar()}
                                theme="theme"
                                notMerge={true}
                                lazyUpdate={true}
                                style={{ height: 300 }}
                            />
                        </Card>
                    </Col>
                    <Col md={12}>
                        <Card bordered={false}>
                            <ReactEcharts
                                option={this.getOptionline()}
                                theme="theme"
                                notMerge={true}
                                lazyUpdate={true}
                                style={{height: 300}}/>
                        </Card>
                    </Col>
                </Row>
                <Card title="快速入口" bordered={false}>
                    <Row className="express-box">
                        <Col md={6}>
                            <div>
                                <NavLink className="express-list" to={`/taskCenter/message/messageList`}>
                                    <Badge count={5}>
                                        <Icon type="mail" style={{fontSize:30}}/>
                                    </Badge>
                                    <div className="txt">消息列表</div>
                                </NavLink>
                            </div>
                        </Col>
                        <Col md={6}>
                            <div>
                                <NavLink className="express-list" to={`/taskCenter/task/taskList`}>
                                    <Badge count={4}>
                                        <Icon type="book" style={{fontSize:30}}/>
                                    </Badge>
                                    <div className="txt">任务列表</div>
                                </NavLink>
                            </div>
                        </Col>
                        <Col md={6}>
                            <div>
                                <NavLink className="express-list" to={`/taskCenter/task/assignTaskList`}>
                                    <Badge count={5}>
                                        <Icon type="hdd" style={{fontSize:30}}/>
                                    </Badge>
                                    <div className="txt">指派任务列表</div>
                                </NavLink>
                            </div>
                        </Col>
                        <Col md={6}>
                            <div>
                                <NavLink className="express-list" to={`/taskCenter/approve/approveList`}>
                                    <Badge count={3}>
                                        <Icon type="profile" style={{fontSize:30}}/>
                                    </Badge>
                                    <div className="txt">审批列表</div>
                                </NavLink>
                            </div>
                        </Col>
                    </Row>
                </Card>
            </div>
        );
    }
}